<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
		<script src="js/vue-router-3.0.1.js"></script>
		<style>
			.myActiveClass{
			  color: red;
		      font-weight: 800;
		      font-style: italic;
		      font-size: 20px;
		      text-decoration: underline;
		      background-color: green;
		      padding: 20px;
			}
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(200px);
			}
			.v-enter-active,.v-leave-active{
				transition: all 0.8s ease;
			}
		</style>
	</head>
	
	<body>
		<div id="app">
			<!--
            	vue-router 提供的占位容器，用来放置匹配成功的组件
            -->
          <!--
          	<a href="#/login">登录</a>
            <a href="#/register">注册</a>
          -->
          <!--
          	router-link默认渲染了a标签，
          -->
            <router-link to="/login" tag="i">登录</router-link>
            <router-link to="/register">注册</router-link>
            
            <transition mode="out-in">
			    <router-view></router-view>
            </transition>
		</div>
		<template id="login">
			<h1>这是login组件</h1>
		</template>
		<script>
			//后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

			//前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

            //在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
            //导入路由的包之后，就在window中有了一个路由的构造函数叫做VueRouter
            var login = {
            	template:'#login',
            }
            
            var register = {
		      template: '<h1>注册组件</h1>'
		    }
            
            
            
            
            
            
            //在实例化一个路由对象的时候，可以 为构造函数传递一个 配置对象
            var routerObj = new VueRouter({
            	//route 这个配置对象 的 route 表示路由匹配规则；
            	routes:[//路由匹配规则
            		// 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
			        //  属性1 是 path， 表示监听 哪个路由链接地址；
			        //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
			        // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
			        // { path: '/', component: login },
			        { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事，【重定向】
			        { path: '/login', component: login },
			        { path: '/register', component: register }
            	],
            	linkActiveClass:"myActiveClass",
            });
            
            
           

			var app = new Vue({
				el:'#app',
				data:{

				},
				methods:{
					
				},
				router:routerObj,//将实例化的路由对象，注册到vue实例上，用来监听url地址的变化 ，然后展示对应的组件
			});
		</script>
	</body>
</html>